<!-- 注意：要增加新的插槽 需在 otherPropSlots 增加插槽名称-->
<template>
  <div class="page-table">
    <table-cont
      v-bind="tableConfig"
      :tableData="tableData"
      :tableTotal="tableTotal"
      v-model:page="pageInfo"
      @selectionChange="selectionChange"
    >
      <!-- 暂留插槽模板 -->
      <!-- <template #status="scope">
        <el-button size="small" :type="scope.row.enable ? 'success' : 'danger'" plain>{{
          scope.row.enable ? '禁用' : '启用'
        }}</el-button>
      </template> -->

      <!-- 公司类型 -->
      <template #companyType="scope">
        <div :class="['type-text', companyType(scope.row.type)]">{{ scope.row.type }}</div>
      </template>

      <!-- 甲方公司 -->
      <template #firstParty="scope">
        <div class="first-party">
          <el-popover
            placement="bottom"
            :width="300"
            trigger="click"
            popper-class="page-table-first-party"
          >
            <template #reference>
              <div class="first-party-inner">
                <span class="audit-icon" v-if="scope.row.shenhe">审</span>
                <span :class="['mle', 'first-name', !scope.row.shenhe ? 'audit' : '']">{{
                  scope.row.jiafang
                }}</span>
                <el-icon size="large" style="cursor: pointer"><ChatDotRound /></el-icon>
              </div>
            </template>
            <div class="popover-cont">
              <div class="popover-cont-inner">
                <p class="name-text">
                  <el-icon><OfficeBuilding /></el-icon><span>客户名称</span>
                </p>
                <p class="name-val">青岛弘贸昇国际贸易有限公司</p>
              </div>
              <el-divider />
              <div class="other">
                <p class="ather-name-box">
                  <el-icon><Share /></el-icon><span class="ather-name-text">其他公司</span>
                </p>
                <p><span class="other-num">1.</span><span>青岛福贸进出口有限公司</span></p>
                <p><span class="other-num">2.</span><span>青岛福贸进出口有限公司</span></p>
              </div>
            </div>
          </el-popover>
        </div>
      </template>

      <!-- 服务情况 -->
      <template #serveCondition="scope">
        <div class="page-table-serve-condition">
          <p v-if="scope.row.fuwu === '全部开通'" :class="['flx-center', 'open']">
            <el-icon><CircleCheck /></el-icon><span>全部开通</span>
          </p>
          <p v-else-if="scope.row.fuwu === '部分开通'" :class="['flx-center', 'portion']">
            <el-icon><CircleCheck /></el-icon><span>部分开通</span>
          </p>
          <p v-else-if="scope.row.fuwu === '待开通'" :class="['flx-center', 'await']">
            <el-icon><Finished /></el-icon><span>待开通</span>
          </p>
          <p v-else-if="scope.row.fuwu === '服务变更'" :class="['flx-center', 'change']">
            <el-icon><User /></el-icon><span>服务变更</span>
          </p>
          <p v-else-if="scope.row.fuwu === '申请变更'" :class="['flx-center', 'apply-for']">
            <el-icon><EditPen /></el-icon><span>申请变更</span>
          </p>
          <p v-else-if="scope.row.fuwu === '服务过期'" :class="['flx-center', 'overdue']">
            <el-icon><Odometer /></el-icon><span>服务过期</span>
          </p>
          <p v-else-if="scope.row.fuwu === '无服务'" :class="['flx-center', 'none']">
            <el-icon><CollectionTag /></el-icon><span>无服务</span>
          </p>
        </div>
      </template>
      <!-- 产品信息 -->
      <template #productInfo>
        <div class="product-info">
          <el-popover
            placement="bottom"
            :width="860"
            trigger="click"
            popper-class="page-table-product-info"
          >
            <template #reference>
              <div class="flx-align-center product-info-inner">
                <span>产品信息</span>
                <el-icon><ArrowDown /></el-icon>
              </div>
            </template>
            <div class="page-table-product-info-box">
              <el-table
                :data="gridData"
                :row-style="{ height: '70px' }"
                height="252"
                :header-cell-style="{ backgroundColor: '#F2F3F5' }"
                class-name="page-table-product-info-inner"
              >
                <template v-for="item in productTableProp" :key="item.id">
                  <el-table-column
                    v-if="!item.slotName"
                    :property="item.prop"
                    :label="item.label"
                  ></el-table-column>
                  <el-table-column v-else :property="item.prop" :label="item.label" min-width="200">
                    <template #default>
                      <ul class="table-product-info-list">
                        <li style="">
                          <p>1. 产品名称</p>
                          <p class="table-product-info-item-type">已开通 | 2022-09-02</p>
                        </li>
                        <li>
                          <p>1. 产品名称</p>
                          <p class="table-product-info-item-type gray">未开通 | 2</p>
                        </li>
                      </ul>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </el-popover>
        </div>
      </template>
      <!-- 页面独有插槽  ||  插入剩余的插槽-->
      <template v-for="item in otherPropSlots" :key="item.prop" #[item.slotName]="scope">
        <!-- 当 solot name 有值的情况下才给插槽 -->
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </table-cont>
  </div>
</template>

<script setup lang="ts" name="PageTable">
import { TableConfig, IPropItem } from './types'

// 测试 数据 start
const productTableProp = [
  { prop: 'type', label: '合同号' },
  { prop: 'jiafang', label: '甲方公司' },
  { prop: 'laiyuan', label: '签约类型' },
  { prop: 'jieduan', label: '签约日期' },
  { prop: 'fuwu', label: '合同金额' },
  { prop: 'chanpin', label: '产品信息', slotName: 'productSlot' },
  { prop: 'tonghang', label: '合同状态' },
  { prop: 'lianxiren', label: '出单人' },
]
const gridData = [
  {
    type: '2016-05-02',
    jiafang: 'Jack',
    laiyuan: 'New York City',
    jieduan: '2016-05-02',
    fuwu: 'Jack',
    chanpin: 'New York City',
    tonghang: 'Jack',
    lianxiren: 'New York City',
  },
  {
    type: '2016-05-02',
    jiafang: 'Jack',
    laiyuan: 'New York City',
    jieduan: '2016-05-02',
    fuwu: 'Jack',
    chanpin: 'New York City',
    tonghang: 'Jack',
    lianxiren: 'New York City',
  },
  {
    type: '2016-05-02',
    jiafang: 'Jack',
    laiyuan: 'New York City',
    jieduan: '2016-05-02',
    fuwu: 'Jack',
    chanpin: 'New York City',
    tonghang: 'Jack',
    lianxiren: 'New York City',
  },
  {
    type: '2016-05-02',
    jiafang: 'Jack',
    laiyuan: 'New York City',
    jieduan: '2016-05-02',
    fuwu: 'Jack',
    chanpin: 'New York City',
    tonghang: 'Jack',
    lianxiren: 'New York City',
  },
]
// 测试数据 end

// 🍓🍇🍈🍉  点击翻页的时候
// 🍓🍇🍈🍉  如果搜索框有值默认
// 🍓🍇🍈🍉  会清空
// 🍓🍇🍈🍉  待解决 bug
// 🍓🍇🍈🍉  ---------
// 🍓🍇🍈🍉  ---------
// 🍓🍇🍈🍉  ---------
// 🍓🍇🍈🍉  ---------
// 🍓🍇🍈🍉  ---------
// 🍓🍇🍈🍉  ---------
// 🍓🍇🍈🍉  搜索的时候要重置为第一页
// 🍓🍇🍈🍉  待解决 bug
// 🍓🍇🍈🍉  待解决 bug
// 定义props
const props = defineProps<{
  tableConfig: TableConfig
  requestApi?: (data?: any) => Promise<any>
}>()
// 表格数据
const tableData = ref([])
// 数据总数
const tableTotal = ref(0)
const pageInfo = ref({ currentPage: 1, pageSizes: 10 })
// 定义获取数据的方法
const getTableData = async (queryInfo: object = {}) => {
  console.log('获取了', queryInfo)
  const data = await props.requestApi({ ...pageInfo.value, ...queryInfo })
  tableData.value = data.data.list
  tableTotal.value = data.data.total
}

// 获取其他的动态插槽
const otherPropSlots = props.tableConfig.propList.filter((item: IPropItem) => {
  // 过滤掉通用插槽，保留下页面独有的插槽
  if (item.slotName === 'companyType') return false
  if (item.slotName === 'firstParty') return false
  if (item.slotName === 'serveCondition') return false
  if (item.slotName === 'productInfo') return false
  return true
})
// 监听选中数据
const selectionChange = (selection: any, idArr: string[]) => {
  console.log('selection', selection)
  console.log('idArr', idArr)
}

// 根据公司不同状态添加不同类名
const companyType = (type: string) => {
  let className: string = ''
  switch (type) {
    case 'A':
      className = 'company-type-a'
      break
    case 'B':
      className = 'company-type-b'
      break
    case 'C':
      className = 'company-type-c'
      break
    default:
      className = ''
      break
  }
  return className
}

// 监听 pageInfo 的改变
watch(pageInfo, () => getTableData())
// 暴露方法
defineExpose({
  getTableData,
})
onMounted(async () => {
  getTableData()
})
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
